<template>
	<div class="home-course">
		<!-- 直播： -->
		<section class="video-live maxW">
			<div class="live-banner clear">
                <!-- 直播播放器部分 -->
                <div class="live-content fl">
                    <template v-if="loginFlag && Object.keys(bigLiveData).length != 0">
                        <livePlayer :liveOptions.sync="bigLiveData" @isLiveEnd="checkLiveEnd"></livePlayer>
                    </template>
                    <div v-else class="no-live frosted-glass1000"></div>
                </div>
                <!-- 视频列表 -->
                <div class="video-winndow fr">
                    <ul class="video-ul">
                        <template v-for="(item, index) of livePicData">
                            <li class="video-li" :key="index" v-if="index < 3">
                                <a @click="goToDetailPage(item.status_m3u8, item.id)"><img :src="BASE_URL + item.picture" :onerror="errorImg" /></a>
                            </li>
                        </template>
                    </ul>
                </div>
			</div>
			<div class="vStatus-content">
				<div class="vStatus-title clear">
					<div class="titleNav clear">
						<div class="titleNav-l fl">
							<span type="text" :class="[vStatus == 'living' ? 'blueC' : '']" @click="toggleStatus(2, null)">直播中</span>
							<span type="text" :class="[vStatus == 'notStarted' ? 'blueC' : '']" @click="toggleStatus(1, null)">未开始</span>
						</div>
						<div class="titleNav-r fr">
							<el-date-picker 
							v-model="liveDate" 
							ref="liveDatePicker" 
							type="date" 
							value-format="yyyy-MM-dd"
							:picker-options="pickerOptions"
							clearable 
							placeholder="- 选择日期 -" 
							@change="toggleStatus(numbStatus, liveDate)"
							>
							</el-date-picker>
							<i class="ipng but_Date01_up" @click="clickDateIcont"></i>
						</div>
					</div>
					<ul class="hot_video clear">
						<li class="i_hotList wow bounceInLeft fl" v-for="(item, index) of liveData" :key="index">
							<a @click="linkToRoom(item)"><img :src="BASE_URL + item.picture" /></a>
							<a @click="linkToRoom(item)">{{ item.name }}</a>
							<div class="i_hotType clear">
								<router-link :to="{ path: '/teach/space', query: { id: item.create_id } }">
									<span><img :src="BASE_URL + item.avatar_path" /></span>
									{{ item.teachername }}
								</router-link>
								<a href="javascript:;">{{ item.time_string }}</a>
							</div>
						</li>
						<div class="noDataTip" v-if="liveData && liveData.length == 0">没发现直播数据哦~</div>
					</ul>
				</div>
			</div>
		</section>
		<!-- 公开课： -->
		<section class="open-class maxW" ref="openclassFloor">
			<div class="bgc-img"><img src="../../../../public/images/image04 (1).png" alt="标语" /></div>
			<div class="i_applicationTitle">
				<span>
					公开课
					<i>推荐</i>
				</span>
			</div>
			<div class="openClass-list">
				<ul class="clear">
					<li class="openClass-li fl clear" v-for="(item, index) of openClassData" :key="index">
						<div class="openClass-view fl">
							<img :src="imgsData[index]" />
							<span>{{ item.name }}专区</span>
						</div>
						<div class="openClass-txt fl">
							<div class="openClass-title clear">
								<span>共{{ item.video_data.data_sum }}个课程</span>
								<!-- /home/openclassList :to="{name: 'openclassList', params: {sectionId: item.id}}" -->
								<a @click="gotoVideoList(item.id)" target="_blank" rel="noopener noreferrer">
									更多
									<i class="ipng Shape_13"></i>
								</a>
							</div>
							<div class="openClass-cont">
								<ul>
									<li class="openClass-ls clear" v-for="(item1, index1) of item.video_data.data" :key="index1">
										<a @click="goToDetailPage(item1.status_m3u8, item1.id)" target="_blank" rel="noopener noreferrer">{{ item1.video_name }}</a>
										<span>
											<i class="ipng playi"></i>
											{{ item1.clicks }}
										</span>
										<a @click="goToDetailPage(item1.status_m3u8, item1.id)" class="video-view" target="_blank" rel="noopener noreferrer"><img :src="BASE_URL + item1.picture" /></a>
									</li>
									<div class="no-data-tip" v-if="item.video_data.data_sum == 0"><span>- 暂无课程 -</span></div>
								</ul>
							</div>
						</div>
					</li>
					<div class="noDataTip" v-if="openClassData && openClassData.length === 0">没发现公开课数据哦~</div>
				</ul>
			</div>
		</section>

	</div>
</template>

<script>
import livePlayer from "./livePlayer/player";
export default {
	components: {
        livePlayer
	},
	data() {
		return {
            //视频：
            userId: this.$g.user_id, //用户id
			bigLiveData: {},
			liveId: null, //大直播的id
			loginFlag: false,
			vStatus: 'living',
			liveDate: '',
			livePicData: [],
			liveData: [], //直播中/未开始/选日期
			numbStatus: 2,
			pickerOptions: {
				disabledDate: time => {
					return time.getTime() < Date.now() - 8.64e7;
				}
			},
			// 公开课：
			openClassData: [],
			imgsData: [
				require('../../../assets/images/course_cate_00.png'),
				require('../../../assets/images/course_cate_01.png'),
				require('../../../assets/images/course_cate_02.png'),
				require('../../../assets/images/course_cate_03.png'),
				require('../../../assets/images/course_cate_00.png'),
				require('../../../assets/images/course_cate_01.png'),
				require('../../../assets/images/course_cate_02.png'),
				require('../../../assets/images/course_cate_03.png'),
				require('../../../assets/images/course_cate_00.png'),
				require('../../../assets/images/course_cate_01.png'),
				require('../../../assets/images/course_cate_02.png'),
				require('../../../assets/images/course_cate_03.png')
            ],
            errorImg: 'this.src="' + require('../../../assets/images/image_loding.png') + '"',
		};
	},
	created() {
		this.getLiveData();
		this.getLivePieces();
		this.toggleStatus(2, null);
		if(this.$store.getters.isMulti){
        	this.getOpenClass2();
		}else{
			this.getOpenClass();
		}
	},
	mounted() {
		this.checkUserLogin();
	},
	computed: {
      isMulti(){
          return this.$store.getters.isMulti;
      }  
    },   
	methods: {
        clickDateIcont(){
            this.$refs.liveDatePicker.$refs.reference.$refs.input.focus();
		},
		gotoVideoList(_id) {
			this.$router.push({name: 'openclassList', params: {sectionId: _id}})
		},

		// 获取直播
		getLiveData() {
			let success = res => {
                if (!is_empty(res.data.data)) {
                    if(res.data.data[0]._status!=2){
                        return;
                    }
                    this.bigLiveData = res.data.data[0]; //大直播详细数据
                    this.liveId = res.data.data[0].id; //大直播id
                }else{
                     this.bigLiveData = {};
                     this.liveId = null;
                }
            };
           let fail = res => {
           };
			this.$ajax({
				url: 'api/live/live_list',
				method: 'get',
				params: {
					page_index: 1,
					page_size: 1,
					live_type: 2
				},
				func: {
					success: success,
					fail: fail
				}
			});
		},
		//查看一下用户有没有登录，若没登录，则不给看直播
		checkUserLogin() {
			let success = res => {
				if (res.data == 'no') {
					this.$message.warning('该直播需要登录才能观看');
					this.loginFlag = false;
				} else {
					this.loginFlag = true;
				}
			};
			let fail = res => {
				this.loginFlag = true;
			};
			this.$ajax({
				url: 'api/setting/check_video_live_user',
				method: 'get',
				params: {
					type: 1
				},
				func: {
					success: success,
					fail: fail
				}
			});
		},
		// 直播窗口右边的小橱窗数据
		getLivePieces() {
            this.livePicData = [];
			let success = res => {
				this.livePicData = res.data.data;
			};
			this.$ajax({
				url: 'api/video/video_list',
				method: 'get',
				params: {
					page_index: 1,
					page_size: 6,
					authority: 1,
					status: 1
				},
				func: {
					success: success
				}
			});
		},
        //直播中live_type2  未开始live_type1  日期live_type2
        // 判断这个状态     _status（1：未开始；2：进行中；3：已结束；4：已过期；5：未审核；6：已拒绝；7:已撤销；8：已关闭）
		toggleStatus(_type, _date) {
			this.numbStatus = _type
            this.liveData = [];
			if (_type == 2 && _date == null) {
				this.vStatus = 'living';
			} else if (_type == 1 && _date == null) {
				this.vStatus = 'notStarted';
			}
			let success = res => {
				if (res.data.data) {
                    this.liveData = res.data.data;
				}
			};
			this.$ajax({
				url: 'api/live/live_list',
				method: 'get',
				params: {
					page_index: 1,
					page_size: 4,
					live_type: _type,
					keyword: null,
					date: _date,
					order:2//最近的直播排在前面
				},
				func: {
					success: success
				}
			});
		},
		//跳去直播间：
		linkToRoom(item) {
			if (item._status == 2) {
				this.$router.push({
					path: '/home/liveRoom',
					query: {
						id: item.id
					}
				});
			} else {
				this.$message.warning('直播未开始');
			}
		},
		// 单级 - 获取公开课数据
		getOpenClass() {
			let success = res => {
				this.openClassData = res.data;
				let _data = deep_clone(res.data);
				for (var i = 0; i < _data.length; i++) {
					this.openClassData[i].video_data = {};
					this.getVideoList(i, _data[i].id);
				}
			};
			this.$ajax({
				url: 'api/org/org',
				method: 'get',
				params: {
					status: 1,
					level: 2
				},
				func: {
					success: success
				}
			});
		},
		// 多级 - 获取公开课数据
		getOpenClass2() {
			let success = res => {
				this.openClassData = res.data;
				let _data = deep_clone(res.data);
				for (var i = 0; i < _data.length; i++) {
					this.openClassData[i].video_data = {};
					this.getVideoList(i, _data[i].id);
				}
			};
			this.$ajax({
				url: 'api/newlevel/platform_org',
				method: 'get',
				params: {
					direction:'balance',
					level: 2
				},
				func: {
					success: success
				}
			});
		},
		
		// 根据专区的id获取对应的视频数据
		getVideoList(inx, _id) {
			let success = res => {
				this.$set(this.openClassData[inx], 'video_data', res.data);
				this.$forceUpdate();
			};
			this.$ajax({
				url: 'api/video/video_list',
				method: 'get',
				params: {
					page_index: 1,
					page_size: 6,
					study_section_id: _id,
					authority: 1,
					status: 1,
					order_type: 'click'
				},
				func: {
					success: success
				}
			});
        },
        // 检测到直播被删除时，初始化页面
        checkLiveEnd(flag){
            if(flag){
                this.getLiveData();
                this.getLivePieces();
                this.toggleStatus(2, null);
            }
        }
	}
};
</script>
<style lang="scss">
.home-course {
    .video-live {
        margin: 20px auto 30px;
    }
    .live-content {
        width: 860px;
        height: 485px;
        border-radius: 3px;
        overflow: hidden;
        background-color: #409EFF;
    }

    .video-winndow {
        background: #111324;
        display: inline-block;
        width: 340px;
        height: 485px;
        text-align: center;
        overflow-y: scroll;
        .video-ul{
            text-align: center;
            padding-top: 14px;
        }
        .video-li {
            display: inline-block;
            width: 250px;
            height: 140px;
            margin-bottom: 14px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            overflow: hidden;

            a {
                display: block;
                height: 100%;

                &:hover img {
                    transform: scale(1.2);
                }
            }

            img {
                width: 100%;
                height: 100%;
                transition: all 0.6s;
            }
        }
    }

    .titleNav {
        padding: 20px 0;
        .titleNav-l {
            display: inline-block;
            span {
                display: inline-block;
                font-size: 14px;
                color: #666;
                height: 38px;
                line-height: 38px;
                cursor: pointer;
                margin-right: 40px;
            }

            .blueC {
                color: #338efc;
                border-bottom: 2px solid#338efc;
            }
        }

        .titleNav-r {

            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
                width: 170px;
            }

            .el-input__prefix {
                display: none;
            }

            .el-input--suffix .el-input__inner {
                border-radius: 4px 0 0 4px;
                border: none;
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            }

            .but_Date01_up {
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            }
        }
    }

    .i_hotType {
        a:nth-child(1) {
            width: 40%;
        }

        a:nth-child(2) {
            width: 60%;
            text-align: end;
        }
    }

    .noDataTip {
        height: 256px;
        line-height: 290px;
        text-align: center;
        color: #666;
        background-color: #fff;
    }

    // openclass:
    .open-class {
        border-top: 1px dashed #cfcfcf;
        overflow: hidden;

        .bgc-img {
            height: 90px;
            margin: 30px 0;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.openClass-list {
    margin: 10px 0 30px;

    .openClass-li {
        width: 49.2%;
        height: 340px;
        background-color: #fff;
        margin-bottom: 1.6%;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    }

    .openClass-li:nth-child(odd) {
        margin-right: 1.6%;
    }

    .openClass-view {
        width: 140px;
        height: 100%;
        font-size: 20px;
        color: #ffffff;
        position: relative;
        border-radius: 3px 0 0 3px;
        writing-mode: vertical-lr;

        img {
            width: 100%;
            height: 100%;
        }

        span {
            position: absolute;
            top: 35%;
            left: 43%;
        }
    }

    .openClass-txt {
        padding: 17px 10px 24px;
        width: calc(100% - 160px);
        height: 100%;
    }

    .openClass-title {
        line-height: 19px;
        padding: 0 0 10px;
        border-bottom: 1px solid #eaeaea;
        color: #888;

        a {
            float: right;
            color: #888;
        }

        .Shape_13 {
            vertical-align: initial;
        }
    }

    .openClass-ls {
        padding: 14px 10px;
        line-height: 19px;
        position: relative;

        &:hover {
            background-color: #effaff;
        }

        &:hover a {
            color: #67aed2;
        }

        &:hover .video-view {
            visibility: visible;
            opacity: 1;
        }

        a {
            font-size: 14px;
            display: block;
            float: left;
            max-width: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        span {
            font-size: 12px;
            color: #666666;
            float: right;

            i {
                margin-right: 5px;
                vertical-align: text-bottom;
            }
        }

        .video-view {
            width: 344px;
            height: 200px;
            background-color: #fff;
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            border-radius: 3px;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            left: 0;
            bottom: 48px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                border: none;
            }
        }
    }

    .no-data-tip {
        font-size: 14px;
        color: #888888;
        margin-top: 120px;
        display: block;
        text-align: center;
    }
	.areaDialog {
		.el-dialog__body {
			span {
				line-height: 32px;
				margin: 0 10px;
			}
		}
	}
}
</style>
